<template>
	<div id="role" class="container">
		<h3 class="title"><span />角色管理</h3>
		<div class="content">
			<div class="left">
				<div class="leftTop">
					<h4>角色列表</h4>
					<el-button size="small" class="add four" type="primary" icon="el-icon-plus" @click="goAdd"
						>新增角色</el-button
					>
				</div>
				<BouncedDialog
					title="添加角色"
					:dialog-show.sync="dialogShow"
					width="50%"
					class="columnDialog"
				>
					<el-form ref="addForm" :model="addForm" :rules="rules" inline label-width="80px">
						<el-form-item label="角色名:" prop="title">
							<el-input v-model="addForm.title" />
						</el-form-item>
						<div class="btn">
							<el-button @click="dialogShow = false">取 消</el-button>
							<el-button type="primary" @click="submit()">确 定</el-button>
						</div>
					</el-form>
				</BouncedDialog>
				<ul class="leftNavcate">
					<li
						v-for="item in roleData"
						:key="item.id"
						:class="activeId == item.id ? 'activeitem' : ''"
						@click="changerole(item)"
					>
						<span class="navtitle">{{ item.title }}</span>
						<div class="icon">
							<i v-if="item.id != 1" class="el-icon-delete" @click="delerole(item)" />
						</div>
					</li>
				</ul>
			</div>
			<div class="right">
				<h4>角色详情</h4>
				<el-tree
					ref="tree"
					:data="menuData"
					show-checkbox
					node-key="id"
					:default-expanded-keys="defaultExpand"
					:default-checked-keys="defaultKeys"
					:props="defaultProps"
					@check="getNode"
				/>
				<div v-if="updateForm.id != 1" class="update">
					<el-form :data="updateForm" inline>
						<el-form-item label="选择站点">
							<el-select v-model="updateForm.website_id" multiple placeholder="请选择站点">
								<el-option
									v-for="item in siteList"
									:key="item.id"
									:label="item.domain"
									:value="item.id"
								/>
							</el-select>
						</el-form-item>
						<el-form-item label="角色名称">
							<el-input v-model="updateForm.title" size="small" class="role_title" />
						</el-form-item>
						<el-form-item>
							<el-switch
								v-model="updateForm.status"
								active-text="启用"
								inactive-text="禁用"
								:active-value="1"
								:inactive-value="2"
								active-color="#f84311"
								inactive-color="rgba(0,0,0,0.2)"
							/>
						</el-form-item>
						<el-button
							type="primary"
							class="save"
							size="small"
							style="margin-left: 20px"
							@click="saveEdit"
							>保存</el-button
						>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import rolesApi from '@/api/admin.js'
export default {
	data() {
		return {
			roleData: [],
			activeId: '1',
			role_id: '',
			roleAuth: '',
			menuData: [], // 所有菜单
			defaultProps: {
				label: 'title',
				children: 'children',
			},
			defaultKeys: [], // 默认选中的节点
			defaultExpand: [], // 默认展开的节点
			addForm: {
				title: '',
			},
			rules: {
				title: [{ required: 'true', message: '请输入角色名', trigger: 'blur' }],
			},
			dialogShow: false,
			updateForm: {
				title: '',
				status: '',
				id: '',
				group: '',
				website_id: '',
			},
			siteList: [],
		}
	},
	created() {
		this.getList()
		this.siteList = this.$store.getters.siteList
	},
	updated() {},
	methods: {
		// 获取所有权限列表
		getMenu() {
			rolesApi.roleAuth().then((res) => {
				this.menuData = res.data
				this.$nextTick(() => {
					this.getRoleInfo(this.roleData[0])
				})
				// this.getCheckedKeys()
			})
		},
		// 切换角色
		changerole(val) {
			this.getRoleInfo(val)
			this.activeId = val.id
		},
		// 角色详情
		getRoleInfo(row) {
			rolesApi.roleInfo({ id: row.id }).then((res) => {
				if (row.id == 1) {
					this.$refs.tree.setCheckedNodes(this.menuData)
				} else {
					this.$refs.tree.setCheckedKeys([])
					this.defaultKeys = res.data.auth
					this.$refs.tree.setCheckedKeys(res.data.auth)
				}

				this.updateForm = {
					title: res.data.title,
					status: res.data.status,
					id: res.data.id,
					group: res.data.group,
					website_id: res.data.website_id,
				}
			})
		},
		getNode(val, value) {
			this.updateForm.auth = [...value.checkedKeys, ...value.halfCheckedKeys]
			this.updateForm.kid_auth = this.$refs.tree.getCheckedKeys(true)
		},
		saveEdit() {
			rolesApi.roleUpdate(this.updateForm).then((res) => {
				if (res.code == 0) {
					this.$message.success(res.msg)
					this.getRoleInfo(this.updateForm)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		// 角色列表
		getList() {
			rolesApi.roleList(this.val).then((res) => {
				this.roleData = res.data.reverse()
				this.getMenu()
				// this.page.total = res.count
			})
		},

		// 获取选中的菜单key
		getCheckedKeys() {
			// this.menu_ids = this.$refs.tree.getCheckedKeys()
		},
		// 提交设置的菜单
		submitMenu() {
			this.getCheckedKeys()
			const val = {
				role_node: this.menu_ids.toString(),
				role_name: this.roleForm.role_name,
			}
			if (!this.role_id) {
				rolesApi.roleSave(val).then((res) => {
					if (res.code == 0) {
						this.$message.success(res.msg)
						this.dialogMenu = false
						this.getList()
					} else {
						this.$message.error(res.msg)
					}
				})
			} else {
				const val = {
					role_node: this.menu_ids.toString(),
					role_name: this.roleForm.role_name,
					role_id: this.role_id,
				}
				rolesApi.roleUpdate(val).then((res) => {
					if (res.code == 0) {
						this.$message.success(res.msg)
						this.dialogMenu = false
						this.getList()
					} else {
						this.$message.error(res.msg)
					}
				})
			}
		},

		// 新增
		goAdd() {
			this.addForm.title = ''
			this.dialogShow = true
		},
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					rolesApi.roleSave(this.addForm).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.dialogShow = false
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					})
				} else {
					this.$message.error('请填写必要信息')
				}
			})
		},
		// 编辑
		// goEdit(row) {
		//   this.role_id = row.role_id
		//   // this.getRoleInfo()
		//   this.role_name = row.role_name
		// },
		// 获取角色信息
		// getRoleInfo() {
		//   rolesApi.getRoleInfo({ role_id: this.role_id }).then(res => {
		//     this.roleForm.role_name = res.data.role_name
		//     if (res.data.role_node) {
		//       const arr = (res.data.role_node).split(',')
		//       this.checkedId = arr
		//     }
		//     // this.checkedId = res.data.role_node
		//     this.$nextTick(() => { this.$refs.tree.setCheckedKeys(this.checkedId) })
		//   })
		// },
		// 删除
		delerole(row) {
			this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					rolesApi.roleDelete({ id: row.id }).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		// 搜索
		search() {
			this.$refs.searchForm.validate((valid) => {
				this.page.currentPage = 1
				// this.getList()
			})
		},

		// 重置搜索框
		reset(searchForm) {
			this.searchForm = {
				admin_name: '',
			}
		},
		// 分页规格改变
		handleSizeChange(val) {
			this.page.size = val
			this.page.currentPage = 1
			this.getList()
		},
		// 分页点击
		handleCurrentChange(val) {
			this.page.currentPage = val
			this.getList()
		},
	},
}
</script>

<style lang="scss">
#role {
	.el-form-item {
		width: 100%;
	}
	.el-form--inline .el-form-item__content {
		width: calc(100% - 80px);
	}
}
</style>
<style lang="scss" scoped>
.container {
	margin-bottom: 40px;
}
.content {
	display: flex;
	justify-content: left;
	.left {
		width: 270px;
		background-color: #fff;
		margin-right: 30px;
		border: solid 1px #eee;
		border-radius: 5px;
		.leftTop {
			height: 60px;
			border-bottom: solid 1px #eee;
			padding: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.leftNavcate {
			list-style: none;
			margin-top: 20px;
			li {
				cursor: pointer;
			}
			li.navtitle {
				font-size: 15px;
				font-weight: bold;
			}
			li {
				width: 220px;
				padding: 0 20px;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				.navtitle {
					cursor: pointer;
				}

				.icon {
					display: none;
					i {
						cursor: pointer;
					}
					.el-icon-delete {
						margin-right: 10px;
					}
				}
			}
			.activeitem .icon {
				display: block;
			}
			// hover的样式
			li:hover {
				color: #f84311;
				background-color: #f4f8fc;
				.icon {
					display: block;
				}
			}
			//选中的样式
			li.activeitem {
				color: #f84311;
				background-color: #f4f8fc;
			}
		}
	}
	.right {
		width: calc(100% - 300px);
		background-color: #fff;
		border: solid 1px #eee;
		border-radius: 5px;
		h4 {
			line-height: 60px;
			border-bottom: solid 1px #eee;
			padding-left: 15px;
		}
		.el-tree {
			margin-top: 20px;
			margin-left: 15px;
		}
		.update {
			margin: 50px 0 10px 20px;
		}
		.half-w {
			width: 50%;
		}
		.role_title {
			width: 200px;
		}
	}
}
</style>
